<!--
 * @Author: 刘翔
 * @Date: 2025-08-04 15:39:32
 * @LastEditTime: 2025-09-03 11:02:41
 * @LastEditors: your name
 * @Description: 组合页面7(各病例类型的超支结余变化趋势)
 * @FilePath: \建达文件\ts-demo\ts-demo\src\pptHome\pageList\pageType7.vue
-->
<template>
  <div class="page-type-7">
    <div class="page-type-7-top">
      <div class="page-type-7-top-left">
        <DataTable ref="table1" v-bind="getTableProps1()" />
      </div>
    </div>
    <div class="page-type-7-center">
      <div class="page-type-7-center-left">
        <BarChart v-if="getChartProps1()" ref="chart1" v-bind="getChartProps1()" />
      </div>
      <div class="page-type-7-center-center">
        <BarChart v-if="getChartProps2()" ref="chart2" v-bind="getChartProps2()" />
      </div>
      <div class="page-type-7-center-right">
        <BarChart v-if="getChartProps3()" ref="chart3" v-bind="getChartProps3()" />
      </div>
    </div>
    <div class="page-type-7-bottom">
      <div class="page-type-7-bottom-card">
        <CardBox>
          <template #right>
            <span class="card-box-right-item-1" v-html="desc"></span>
          </template>
        </CardBox>
      </div>
    </div>
  </div>
</template>
<script>
import BarChart from '../components/BarChart.vue';
import DataTable from '../components/DataTable.vue';
import CardBox from '../components/cardBox.vue';
export default {
  name: 'pageType7',
  components: {
    BarChart,
    DataTable,
    CardBox,
  },
  props: {
    chartList1: {
      type: Object,
      default: () => {},
    },
    chartList2: {
      type: Object,
      default: () => {},
    },
    chartList3: {
      type: Object,
      default: () => {},
    },
    tableData1: {
      type: Object,
      default: () => {},
    },
    desc: {
      type: String,
      default: '',
    },
  },
  data() {
    return {};
  },
  methods: {
    getTableProps1() {
      return {
        tableData: this.tableData1.data,
        columns: this.tableData1.columns,
        tableParams: {
          headerHeight: 40,
        },
        pptOptions: {
          x: 0.3, // X轴位置
          y: 0.8, // Y轴位置
          h: 1.5, // 高度
          title: {
            // 标题配置
            x: 0.5,
            y: 0.5,
            fontSize: 24,
            color: '363636',
            bold: true,
          },
          table: {
            // 表格配置
            colW: this.tableData1.columns.map(item => this.pptWidthPercentFn(item.widthPercent)),
            // 表格内容配置
            content: {
              fontSize: 8,
              color: '000000',
              bold: true,
            },
            // 表格标题配置
            title: {
              fontSize: 8,
              color: 'ffffff',
            },
            // 表格边框样式
            borderStyle: {
              color: '000000',
            },
            // 表格垂直对齐方式(middle, top, bottom)
            valign: 'middle',
            // 表格水平对齐方式(left, center, right)
            align: 'center',
            // 自动分页
            autoPage: false,
            // 自动分页标题是否显示
            autoPageRepeatHeader: false,
            // 自动分页标题行数
            autoPageHeaderRows: 1,
          },
        },
      };
    },
    // 计算ppt宽度百分比(15.5是ppt目前总宽度)
    pptWidthPercentFn(pptWidthPercent) {
      return (pptWidthPercent / 100) * 15.5;
    },
    getChartProps1() {
      return {
        title: this.chartList1.title,
        categories: this.chartList1.data.map(item => item[this.chartList1.XShow]),
        values: this.chartList1.data.map(item => item[this.chartList1.keyList[0]]),
        color: this.chartList1.color,
        smooth: true,
        chartConfig: {
          height: 400,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}万',
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '80%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 0.3,
            y: 2.6,
            w: 3,
            h: 2.2,
          },
          // 标题配置
          title: {
            x: 1.6,
            y: 2.6,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //显示值
            showValue: true,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList1.data.map(item => Math.abs(item[this.chartList1.keyList[0]]))) * 1.8),
            // 数据标签位置
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            // 数据标签格式化代码
            dataLabelFormatCode: `#,##0.00万`,
          },
        },
      };
    },
    getChartProps2() {
      return {
        title: this.chartList2.title,
        categories: this.chartList2.data.map(item => item[this.chartList2.XShow]),
        values: this.chartList2.data.map(item => item[this.chartList2.keyList[0]]),
        color: this.chartList2.color,
        smooth: true,
        chartConfig: {
          height: 400,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}万',
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '80%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 3.5,
            y: 2.6,
            w: 3,
            h: 2.2,
          },
          // 标题配置
          title: {
            x: 4.3,
            y: 2.6,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList2.data.map(item => Math.abs(item[this.chartList2.keyList[0]]))) * 1.8),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            dataLabelFormatCode: `#,##0.00万`,
          },
        },
      };
    },
    getChartProps3() {
      return {
        title: this.chartList3.title,
        categories: this.chartList3.data.map(item => item[this.chartList3.XShow]),
        values: this.chartList3.data.map(item => item[this.chartList3.keyList[0]]),
        color: this.chartList3.color,
        smooth: true,
        chartConfig: {
          height: 400,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true,
          },
          tooltip: {
            textStyle: {
              fontSize: 18,
            },
            formatter: '{b}: {c}万',
          },
          xAxis: {
            type: 'value',
            axisLabel: {
              fontSize: 18,
            },
          },
          yAxis: {
            type: 'category',
            axisLabel: {
              fontSize: 18,
            },
          },
          series: {
            barWidth: '80%',
            itemStyle: {
              normal: {
                color: function (params) {
                  return params.data >= 0 ? '#4874cb' : '#ee6666';
                },
              },
            },
            label: {
              position: 'right',
              show: true,
              fontSize: 18,
              formatter: '{c}万',
            },
          },
        },
        pptConfig: {
          // 图表位置和大小
          position: {
            x: 6.5,
            y: 2.6,
            w: 3,
            h: 2.2,
          },
          // 标题配置
          title: {
            x: 7.4,
            y: 2.6,
            fontSize: 12,
            color: '363636',
            bold: true,
          },
          // 图表配置
          chart: {
            showLegend: false,
            legendPos: 'b',
            showTitle: false,
            //条形方向
            barDir: 'bar',
            // 分类轴字体大小
            catAxisLabelFontSize: 8,
            // 数据标签字体大小
            dataLabelFontSize: 7,
            //数值轴刻度步长(最大值的1.8倍)
            valAxisMajorUnit: Math.round(Math.max(...this.chartList3.data.map(item => Math.abs(item[this.chartList3.keyList[0]]))) * 1.8),
            //显示值
            showValue: true,
            dataLabelPosition: 'outEnd',
            // 分类轴标签位置
            catAxisLabelPos: 'low',
            dataLabelFormatCode: `#,##0.00万`,
          },
        },
      };
    },
    // 解析带颜色的文本
    parseColoredText(text) {
      return text
        .split(/(<span[^>]*>.*?<\/span>)/)
        .filter(part => part) // 移除空字符串
        .map(part => {
          const match = part.match(/<span[^>]*color:(#[0-9a-f]+)[^>]*>(.*?)<\/span>/i);
          return match ? { text: match[2], color: match[1] } : { text: part, color: '#000000' };
        });
    },
    exportToPPT(pptx, slide) {
      this.$refs.table1.exportToPPT(pptx, slide);
      this.$refs.chart1.exportToPPT(pptx, slide);
      this.$refs.chart2.exportToPPT(pptx, slide);
      this.$refs.chart3.exportToPPT(pptx, slide);
      let textList = [];
      this.parseColoredText(this.desc).forEach(item => {
        textList.push({
          text: item.text,
          options: {
            fontSize: 12,
            color: item.color,
          },
        });
      });
      //卡片
      slide.addText(textList, {
        shape: pptx.shapes.ROUNDED_RECTANGLE,
        x: 0.5,
        y: 4.7,
        w: 9,
        h: 0.8,
        rectRadius: 0.2,
        //边框
        line: { color: '151515', width: 0.5 },
        fill: { color: 'fff2ca' },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.page-type-7 {
  width: 100%;
  height: 100%;
  .page-type-7-top {
    display: flex;
    height: 400px;
    .page-type-7-top-left {
      width: 100%;
      height: 100%;
    }
    .page-type-7-top-right {
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 25%;
      height: 100%;
      background-color: #dae3f5;
      border: 2px solid #6086d2;
      border-radius: 16px;
    }
  }
  .page-type-7-center {
    display: flex;
    .page-type-7-center-left {
      width: 33.33%;
    }
    .page-type-7-center-center {
      width: 33.33%;
    }
    .page-type-7-center-right {
      width: 33.33%;
    }
  }
  .page-type-7-bottom {
    .page-type-7-bottom-card {
      .card-box-right-item-1 {
        font-size: 2rem;
      }
    }
  }
  .card-box-container {
    margin: 10px 0;
  }
}
</style>
